<template>
	<view class="container hidden" v-if='pageInfo' :class='pageInfo ? "show" : "" '>
	    <view class="header bg-f">
			<view class="title-box">
				<view :class="'title flex flex-x-between ' + titleFixed" >
				    <view class="left">{{ pageInfo.now_store.name }}</view>
					<text class="iconfont icon-aixin-copy rel active" v-show="pageInfo.now_store.is_collect" @click='collectStore'></text>
					<text class="iconfont icon-aixin1 rel" v-show="!pageInfo.now_store.is_collect" @click='collectStore'></text>
				</view>
			</view>
	        <view class="flex flex-y-center star-wrapper">
				<block v-if="pageInfo.reply_count > 0">
					<view class="star-box" @click="goUrl('/pages/store/replyList?store_id=' + store_id + '&total=' + pageInfo.reply_count, true)">
					    <image class="star" src="../../static/images/star-full.png" v-for=" fullNum in store_score[0]"></image>
					    <image class="star" src="../../static/images/star-half.png" v-if="store_score[1]" v-for=" halfNum in store_score[1]"></image>
					    <image class="star" src="../../static/images/star-empty.png" v-if="store_score[2]" v-for=" emptyNum in store_score[2]"></image>
						<lang class="block-in num" keywords="X1条" :X1="pageInfo.reply_count" :chineseTxt="pageInfo.reply_count + '条'"></lang>
						<text class="icon-sanjiaoR iconfont"></text>
					</view>
				</block>
				<block v-else>
					<view class="star-box">
					    <image class="star" src="../../static/images/star-full.png" v-for=" fullNum in store_score[0]"></image>
					    <image class="star" src="../../static/images/star-half.png" v-if="store_score[1]" v-for=" halfNum in store_score[1]"></image>
					    <image class="star" src="../../static/images/star-empty.png" v-if="store_score[2]" v-for=" emptyNum in store_score[2]"></image>
					</view>
				</block>
				<lang v-if=" pageInfo.now_store.permoney > 0 " keywords="人均X1" :X1="pageInfo.now_store.permoney" unit="yuan" :chineseTxt="'人均'+ pageInfo.now_store.permoney + currencySymbol"></lang>
	            <text v-if=" pageInfo.now_store.permoney > 0 " class="iconfont icon-line color-c"></text>
	            <text >{{ pageInfo.now_store.cat_name }}</text>
	        </view>
	        <!-- 商家图片 -->
			<movable-area class="small-img-box" v-if="pageInfo.now_store.all_pic.length > 0">
				<movable-view class="img-box" direction="horizontal" inertia="true" out-of-bounds="true" :disabled="smallImgDisabled">
					<image class="img" v-for="(item, index) in pageInfo.now_store.all_pic" :key="index" @click='previewImage(index)' :src="item" alt=""></image>
				</movable-view>
			</movable-area>
			
	        <view class="flex flex-x-between flex-y-center line border-b time-box" @click='openTimeBox'>
	            <view class="left">
	                <text  class="iconfont icon-shangdian first"></text>
	                <text >{{ pageInfo.now_store.open_status }}</text>
	                <text  class="icon-line iconfont color-c"></text>
	                <text >{{ pageInfo.now_store.time }}</text>
	            </view>
	            <view class="right">
	                <text  class="icon-jiantou iconfont color-9"></text>
	            </view>
	        </view>
	        <view class="flex flex-x-between flex-y-center line">
	            <view class="left flex-grow1 ellipsis-one">
	                <view class="ellipsis-one">
	                    <text  class="icon-dingwei4 iconfont first"></text>
	                    <text >{{ pageInfo.now_store.adress }}</text>
	                </view>
	                <view class="color-9 distance">{{ pageInfo.now_store.user_distance }}</view>
	            </view>
	            <view class="right flex-shink0">
	                <text  class="icon-che iconfont big" @click="checkMap"></text>
	                <text  class="icon-line iconfont color-c"></text>
	                <text  class="icon-dianhua1 iconfont big" @click="checkPhone"></text>
	            </view>
	        </view>
	        <view class="flex service">
	            <view class="little-btn flex" v-if='pageInfo.btn_arr.length <= 3'>
	                <view class="item flex1 flex flex-y-center flex-x-center check" v-for=' item in pageInfo.btn_arr ' @click='goUrl(item.url)'>
	                    <view class="img-box"><img class="img" :src="item.pic" ></view>
	                    <view>
	                        <view class="name">{{ item.name }}</view>
	                        <view class="color-9 desc">{{ item.desc }}</view>
	                    </view>
	                </view>
	            </view>
	            <view class="flex flex-wrap more-btn" v-else>
	                <view class="item flex1 " v-for=' item in pageInfo.btn_arr ' @click='goUrl(item.url)'>
	                    <view class="img-box"><img class="img" :src="item.pic"></view>
	                    <view class="name">{{ item.name }}</view>
	                    <view class="color-9 desc">{{ item.desc }}</view>
	                </view>
	            </view>
	        </view>
	    </view>
	    <view :class=" showTabTitleFixed ? 'tab-title-wrapper' : '' " >
	        <view class="flex flex-x-around flex-y-center bg-f tab-title" :class=" showTabTitleFixed ? 'fixed' : '' ">
				<view class="flex-grow1 item" :class=" tabActiveIndex == index ? 'active' : '' " v-for="(item, index) in tabTitle" @click="pageScrollTo(index)">
				    <text class="rel">{{item}}</text>
				</view>
	        </view>
	    </view>
	    <view class="bg-f mb10 coupon-box tab-title-content" v-if="pageInfo.store_group_list.length > 0 || pageInfo.now_store.have_card">
	        <view v-if="pageInfo.store_group_list.length > 0">
	            <view class="type-title" >{{pageInfo.store_group_list_name}}({{pageInfo.store_group_list.length}})</view>
	            <view class="list border-b">
	                <view  class="flex item" v-for="(item, index) in pageInfo.store_group_list" :key="index" @click="goUrl(item.url)">
	                    <view class="flex-shink0 img-box"><img class="img" :src="item.list_pic" alt=""></view>
	                    <view class="flex-grow1 info">
	                        <view class="ellipsis-one title">{{ item.group_name }}</view>
	                        <view class="color-9 ellipsis-one desc">{{ item.intro }}</view>
	                        <view class="discount">
								<lang class="txt" v-if=' item.wx_cheap > 0 ' keywords="微信下单优惠X1" :X1="item.wx_cheap" unit="yuan" :chineseTxt="'微信下单优惠'+ item.wx_cheap + currencySymbol"></lang>
	                        </view>
	                        <view class="flex flex-x-between price-box">
	                            <view>
	                                <text class="red">¥</text>
	                                <text class="red now mr5">{{ item.price }}</text>
	                                <text class="old" v-if="item.old_price > item.price">¥{{ item.old_price }}</text>
	                            </view>
	                            <view v-if="item.sale_count > 0"><lang keywords="已售X1份" :X1="item.sale_count" :chineseTxt="'已售'+ item.sale_count +'份'"></lang></view>
	                        </view>
	                    </view>
	                </view>
	            </view>
	        </view>
	        <view class="menber-card" v-if="pageInfo.now_store.have_card">
	            <view class="type-title"><lang keywords="会员卡" chineseTxt="会员卡"></lang></view>
	            <view class="card" @click="goUrl(pageInfo.now_store.card_url)">
	                <view class="img-box rel">
	                    <image class="img" src="../../static/images/menber.png" alt=""></image>
	                    <view class="card-info" v-if=' pageInfo.now_store.card_info.have_card'>
	                        <view class="flex flex-x-between mb10">
	                            <view class="block-in">
									<text class="icon-huiyuan2 iconfont"></text>{{ pageInfo.now_store.merchant_name }}
									<lang keywords="会员卡" chineseTxt="会员卡"></lang>
								</view>
	                            <view class="block-in num"><lang keywords="余额" chineseTxt="余额"></lang>：{{ pageInfo.now_store.card_info.money }}</view>
	                        </view>
	                        <view class="flex flex-x-between name-box">
	                            <text class="name">{{ pageInfo.now_store.card_info.nickname }}</text>
	                            <view class="block-in num"><lang keywords="积分" chineseTxt="积分"></lang>：{{ pageInfo.now_store.card_info.score }}</view>
	                        </view>
	                    </view>
	                    <view v-else >
	                        <view class="block-in icon-box">
								<text  class="icon-huiyuan2 iconfont"></text>
								<lang keywords="本店会员" chineseTxt="本店会员"></lang>
							</view>
	                        <button class="btn"><lang keywords="立即加入" chineseTxt="立即加入"></lang></button>
	                    </view>
	                </view>
	                <view class="desc"><lang keywords="入会即享X1会员权益" :X1="pageInfo.now_store.merchant_name" :chineseTxt="'入会即享'+ pageInfo.now_store.merchant_name +'会员权益'"></lang></view>
	            </view>
	        </view>
	    </view>
		<view class="bg-f special-food tab-title-content" v-if="pageInfo.store_meal_recommend_list.length > 0">
			<view class="type-title"><lang keywords="招牌菜" chineseTxt="招牌菜"></lang></view>
			<movable-area class="small-img-box" >
				<movable-view class="img-box"  direction="horizontal" inertia="true" out-of-bounds="true" @change="seeMore">
					<view class="item" v-for="(item, index) in pageInfo.store_meal_recommend_list" :key="index" @click="goUrl(pageInfo.store_meal_recommend_url)">
						<view>
							<image class="img" :src="item.image" alt=""></image>
						</view>
						<view class="name">{{item.name}}</view>
					</view>
					<view class="flex flex-y-center more" v-if="pageInfo.store_meal_recommend_list.length > 3" @click="goUrl(pageInfo.store_meal_recommend_url)">
						<lang class="txt" keywords="查看更多" chineseTxt="查看更多"></lang>
					</view>
				</movable-view>
			</movable-area>
		</view>
	    <view class="bg-f mb10 pd20 reply tab-title-content" v-if="pageInfo.reply_count > 0">
	        <view class="type-title"><lang keywords="评价" chineseTxt="评价"></lang>({{ pageInfo.reply_count }})</view>
	        <view class="list">
	            <view  class="item" v-for="(item, index) in pageInfo.reply_list" :key="index" v-if='item.pigcms_id'>
	                <view class="flex flex-y-center user">
	                    <view class="img-box"><img class="img" :src="item.avatar" alt=""></view>
	                    <view class="desc">
	                        <view class="name">{{ item.nickname }}</view>
	                        <view class="color-9 mt10">{{ item.add_time }}</view>
	                    </view>
	                </view>
	                <view class="flex mt10 star-wrapper">
	                    <lang class="color-9" keywords="评分" chineseTxt="评分"></lang>：
	                    <view class="star-box" v-if='item.scoreArr'>
							<image class="star" src="../../static/images/star-full.png" v-for=" full in item.scoreArr[0] "></image>
							<image class="star" src="../../static/images/star-half.png" v-for=" half in item.scoreArr[1] "></image>
							<image class="star" src="../../static/images/star-empty.png" v-for=" empty in item.scoreArr[2] "></image>
	                    </view>
	                </view>
	                <view class="mt10 reply-desc">{{ item.comment }}</view>
	                <view class="mt10 color-9" v-if=' item.goods_arr.length > 0 '>
	                    <lang keywords="推荐菜" chineseTxt="推荐菜"></lang>：
	                    <text class="goods-item" v-for=" goodsItem in item.goods_arr">{{ goodsItem }}</text>
	                </view>
	                <view class="flex flex-wrap reply-img">
	                    <view class="img-box rel" v-for='imgItem in item.pic'><img class="img" :src="imgItem" alt=""></view>
	                </view>
	            </view>
	        </view>
	        <view class="more-btn">
	            <view  class="block-in btn" @click="goUrl('/pages/store/replyList?store_id=' + store_id + '&total=' + pageInfo.reply_count, true)">
					<lang keywords="查看全部" chineseTxt="查看全部"></lang>
					<text class="icon-jiantou iconfont color-9"></text>
				</view>
	        </view>
	    </view>
	    <view class="bg-f mb10 flex flex-x-between flex-y-center other-store tab-title-content" v-if=" pageInfo.mer_store_count > 1 " @click="goUrl('/pages/store/phoneList?mer_id=' + pageInfo.now_store.mer_id, true)">
			<lang keywords="查看其他门店(X1)家" :X1="pageInfo.mer_store_count" :chineseTxt="'查看其他门店('+ pageInfo.mer_store_count +')家'"></lang>
	        <text  class="icon-jiantou iconfont color-9"></text>
	    </view>
	    
		<view class="bg-f like-box" v-if="pageInfo.guess_list.length > 0 && config">
	        <view class="type-title"><lang keywords="猜你喜欢" chineseTxt="猜你喜欢"></lang></view>
	        <view class="list">
				<StoreItem v-for=" (item, index) in pageInfo.guess_list " :config="config" :location="location" :item="item" :isLast=" (index + 1) == pageInfo.guess_list.length"></StoreItem>
	        </view>
	    </view>

	    <view class="time-box" :class="showTimeBox ? 'active' : '' ">
	        <view class="time-mask" @click="closeMask('showTimeBox')"></view>
	        <view class="time-info">
	            <view class="title border-b">
					<lang keywords="商家服务信息" chineseTxt="商家服务信息"></lang>
	                <text class="icon" @click="closeMask('showTimeBox')">×</text>
	            </view>
	            <view class="info">
	                <view class="small-title mb10"><lang keywords="营业时间" chineseTxt="营业时间"></lang></view>
	                <view class="small-content mb10" v-for='item in pageInfo.now_store.time_arr'>{{ item }}</view>
	            </view>
	        </view>
	    </view>
	    
		<view :class="'shareBtnsContent contact-box ' + (showPhoneBox ? 'active' :'')">
			<view class="title desc"><lang keywords="请选择联系客服的方式" chineseTxt="请选择联系客服的方式"></lang></view>
			<view class="list">
				<view class="desc" v-for="(item, index) in pageInfo.now_store.phone" :key="index" @tap="callPhone(item)">{{item}}</view>
			</view>
			<button class="btn" @tap="closeMask('showPhoneBox')"><lang keywords="取消" chineseTxt="取消"></lang></button>
		</view>
		<view class="mask_bg" v-show="showPhoneBox" @tap="closeMask('showPhoneBox')"></view>
		
		<userinfo :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
	</view>
	
</template>

<script>
	import StoreItem from '../../appComponent/platcommon/favoured-store-item.vue'
	import common from '../../utils/common.js'
	var _this
	var app = getApp()
	export  default {
		components: {
			StoreItem
		},
		data () {
			return {
				food_more_style: '',
				food_more_txt_style: '',
				reply_list: [1, 2],
				pageInfo: '',
				store_score: [],
				
				tabTitleTop: 0,
				tabActiveIndex: 0,
				showTabTitleFixed: false,
				tabItemTopArr: [],
				
				store_id: '',
				showTimeBox: false,
				lng: 117.24535169867772,
				lat: 31.83093382967352,
				showPhoneBox: false,
				systemInfo: {},
				titleFixed: '', // 店铺标题是否固定
				smallImgDisabled: false,
				user_options: {},
				config: '',
				currency: '¥',
				currencySymbol: '元',
				tabTitle: [],
				location: {lng:0, lat:0}
			}
		},
		onLoad (options) {
			_this = this
			common.getConfig(function(data){
				console.log('获取config', data)
				_this.config = data
				_this.currency = data.config.Currency_symbol
				_this.currencySymbol = data.config.Currency_txt
			})
			_this.systemInfo = uni.getSystemInfoSync()
			_this.store_id = options.store_id
			if (options.lng || options.lat) {
				_this.lng = options.lng
				_this.lat = options.lat
				_this.location = {lng: options.lng, lat: options.lat}
				getPageInfo()
			} else {
				common.locationFun((res) => {
					console.log('定位信息', res)
					if (res.lng || res.lat) {
						_this.lng = res.lng
						_this.lat = res.lat
						_this.location = {lng: res.lng, lat: res.lat}
					}
					getPageInfo()
				})
			}
		},
		onPageScroll (e) {
			
			if (e.scrollTop > 42 && !_this.titleFixed) {
				_this.titleFixed = 'fixed'
			} else if (e.scrollTop <= 42 && _this.titleFixed) {
				_this.titleFixed = ''
			}
			
			if (_this.tabTitle.length > 0) {
				if (e.scrollTop > _this.tabTitleTop && !_this.showTabTitleFixed) {
					_this.showTabTitleFixed = true
				} else if (e.scrollTop <= _this.tabTitleTop && _this.showTabTitleFixed) {
					_this.showTabTitleFixed = false
				}
				
				if ( _this.tabActiveIndex < _this.tabItemTopArr.length - 1 && e.scrollTop >= _this.tabItemTopArr[_this.tabActiveIndex + 1].top) {
					_this.tabActiveIndex = _this.tabActiveIndex + 1
					console.log('111', _this.tabActiveIndex)
				}
				if ( _this.tabActiveIndex > 0 && e.scrollTop < _this.tabItemTopArr[_this.tabActiveIndex].top) {
					_this.tabActiveIndex = _this.tabActiveIndex - 1
					console.log('111', _this.tabActiveIndex)
				}
			}
			
		},
		methods: {
			pageScrollTo (index) {
				uni.pageScrollTo({
					// 88 是顶部固定的标题总高度
					scrollTop: _this.tabItemTopArr[index].top,
					duration: 300
				})
			},
			// 点击电话图标
			checkPhone () {
			    var _this = this 
			  if (this.pageInfo.now_store.phone.length == 1 && this.pageInfo.now_store.phone[0]) {
				  uni.makePhoneCall({
				  	phoneNumber: this.pageInfo.now_store.phone[0]
				  });
			  } else if (this.pageInfo.now_store.phone.length > 1) {
			      this.showPhoneBox = true
			  } else {
				  uni.showToast({
				  	title: common.changeTxt('当前店铺暂未设置电话')
				  })
			  }
			},
			callPhone (phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
				this.showPhoneBox = false
			},
			// 点击汽车图标打开地图查看位置
			checkMap () {
				var dataset = {
					type: 'baidu',
					name: this.pageInfo.now_store.name,
					address: this.pageInfo.now_store.adress,
					lng: this.pageInfo.now_store.long,
					lat: this.pageInfo.now_store.lat
				};
				common.openMap(dataset);
			},
			goUrl (url, isPage) {
				if (isPage) {
					uni.navigateTo({
						url: url 
					})
					return
				} 
				common.parseUrl(url)
			},
			// 收藏店铺
			collectStore () {
			    if (app.globalData.is_login) {
			        common.post('Merchant&a=store_collection', {store_id: _this.store_id, noTip: true}, function (data) {
			            if (data) {
							_this.pageInfo.now_store.is_collect = !_this.pageInfo.now_store.is_collect
							uni.showToast({
								title: data
								
							})
			            }
			        })
			    } else {
			        _this.user_options = {
						toLogin: true
					}
			    }
			},
			getUserInfo(e) {
				if (e.userInfo) {
					_this.userInfo = e.userInfo
				}
			},
			openTimeBox () {
			    this.showTimeBox = true
			},
			closeMask (name) {
			    this[name] = false
			},
			previewImage (index) {
				 // 预览图片
				uni.previewImage({
					urls: _this.pageInfo.now_store.all_pic,
					current: index
				});
			}
		}
	}
	// 获取页面数据
	const getPageInfo = () => {
		common.post('Merchant&a=shop', {store_id: _this.store_id, lng: _this.lng, lat: _this.lat}, function(data) {
		
		    if (data) {
		        _this.store_score = scoreHandle(data.now_store.store_score)
		        if (data.reply_list && data.reply_list.length > 0) {
		            for (var i = 0; i < data.reply_list.length; i++) {
		                if (data.reply_list[i].score) {
		                    data.reply_list[i].scoreArr = scoreHandle(data.reply_list[i].score)
		                }
		            }
		        }
		        data.now_store.phone = data.now_store.phone.split(' ')
				
				let tabTitle = []
				if (data.store_group_list.length > 0) {
					tabTitle.push(data.store_group_list_name)
				}
				if (data.store_meal_recommend_list.length > 0) {
					tabTitle.push(common.changeTxt('招牌菜'))
				}
				if (data.reply_count > 0) {
					tabTitle.push(common.changeTxt('评价'))
				}
				if (data.mer_store_count > 1) {
					tabTitle.push(common.changeTxt('商家信息'))
				}
				_this.tabTitle = tabTitle
		        _this.pageInfo = data
				
				// 店铺图片是否可以左右滑动
				if (data.now_store.all_pic.length * 150 < _this.systemInfo.windowWidth) {
					_this.smallImgDisabled = true
				}
		        
		        if (_this.pageInfo.guess_list.length > 0) {
		            for (var i = 0; i < _this.pageInfo.guess_list.length; i++ ) {
		                var item = _this.pageInfo.guess_list[i]
		                if (item.business_label != '') {
		                    var arr = []
		                    if (item.re_type == 'store' || item.re_type == 'meal') {
								arr = item.business_label.split(',')
		                    }
							item.business_label = arr
		                }
		                if (item.re_type == 'hotel' && item.label != '') {
		                    item.label_arr = item.label.split(',')
		                }
		                if (item.re_type == 'group') {
		                    item.discount = (item.price / item.old_price).toFixed(2)
		                    item.discount = item.discount * 100
		                    item.discount = ((item.discount > 0 && item.discount <= 50) || (item.price == 0 && item.old_price > 0)) ? true : false
		                    item.isShowDiscount = (item.discount > 0 && item.discount <= 50) || (item.price == 0 && item.old_price > 0)
		                }
						_this.pageInfo.guess_list.splice(i, 1, item)
		            }
		        }
				
				console.log('店铺数据', data)
				if (_this.tabTitle.length > 0) {
					setTimeout(function(){
						getRectInfo()
					}, 300)
				}
		    }
		})
	}
	
	const getRectInfo = () => {
		const query = uni.createSelectorQuery();
		query.selectAll('.tab-title, .tab-title-content').boundingClientRect(data => {
			console.log("得到布局位置信息", data);
			if (data) {
				_this.tabTitleTop = data[0].top - 42
				_this.tabItemTopArr = data.splice(1, data.length)
				_this.tabItemTopArr.map(item => {
					item.top = item.top - 88
					return item
				})
				console.log("得到tabTitle位置信息", _this.tabTitleTop, _this.tabItemTopArr)
			}
		}).exec();
	}
	
	// 评分处理
	const scoreHandle = (score) => {
	    var arr = []
	    arr[0] = Math.floor(score)
	    if (score > arr[0] && score < 5) {
	        arr[1] = 1
	        arr[2] = 4 - arr[0]
	    }
	    return arr
	}
</script>

<style>
	@import url("./homePage.css");
</style>
